@section('content')
<div class="am-panel am-panel-default am-padding am-cf">
	<div class="am-panel-hd">{{{$type == 1 ? 'PC首页图片' : 'Mobile首页图片'}}}</div>
    <div class="am-panel-bd">
    	<div class="am-g am-u-md-12">
    		<div class="am-btn-toolbar">
	            <div class="am-btn-group am-btn-group-xs">
	              <button type="button" class="am-btn am-btn-primary" data-am-modal="{target: '#add-image-dailog'}">
	              	<span class="am-icon-plus"></span>添加
	              </button>
	            </div>
	         </div>
	         <ul id="banners" class="am-thumbnails am-avg-md-4 am-margin-top" >
			  @foreach ($banners as $banner)
			    <li data-id="{{$banner->id}}" data-image="{{$banner->image}}" class="m-image-item">
			    	<img class="am-thumbnail" src="{{Images::url($banner->image ,235 ,180)}}" alt=""/>
			    	<button type="button" class="am-close m-image-close">&times;</button>
			  	</li>
			  @endforeach
			</ul>
    	</div>
    	
    </div>
</div>

<div class="am-panel am-panel-default am-padding am-cf">
	<div class="am-panel-hd">首页风格</div>
    <div class="am-panel-bd">
    	<div class="am-g am-u-md-12">
    		<form action="{{URL::route('home-style')}}" method="post">
    		<select name="style" id="style">
    			@foreach ($styles as $key => $value)
    				<option value="{{$key}}" {{$key == $style ? 'selected' : ''}}>{{$key}}</option>
    			@endforeach
    		</select>
    		</form>
    	</div>
    	
    </div>
</div>

<!-- 添加图片 start -->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="add-image-dailog">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">添加图片
      <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
    </div>
    <div class="am-modal-bd">
      	<form class="am-form" id="add-image-form" method="post" enctype="multipart/form-data" action="{{URL::route('banner-add')}}">
		      <fieldset class="am-form-set">
		        <input type="file" placeholder="选择一张图片" name="image" id="image"/>
		        <input type="text" placeholder="输入链接地址" name="url" id="url"/>
		      </fieldset>
		      <p class="am-text-danger error-msg">
			      	
			  </p>
			  <input type="hidden" name="type" value="{{$type}}" />
		      <button id="add-image-btn" class="am-btn am-btn-primary am-btn-block"  data-am-loading="{spinner: 'circle-o-notch', loadingText: '保存中...', resetText: '添加'}">添加</button>
		</form>
    </div>
  </div>
</div>
<!-- 添加图片结束 -->
@stop


@section('script')
<script id="add-image-item" type="text/x-handlebars-template">
<li data-id="@{{id}}" data-image="@{{image}}" class="m-image-item">
	<img class="am-thumbnail" src="@{{imgurl image 235 180}}" alt=""/>
	<button type="button" class="am-close m-image-close">&times;</button>
</li>
</script>
<script type="text/javascript">
$(function () {
	$("#add-image-btn").click(function(){
		
	});
	var options = {
            clearForm:true,
            beforeSubmit:function(){
            	var image = $("#image").val();
        		if (!image){
        			alert("必须选择图片");
        			return false;
        		}

        		var url = $("#url").val();
        		if (url && url.length > 256){
        			alert("图片地址不能超过256个字符");
        			return false;
        		}
        		$("#add-image-btn").button('loading');
            },
            success: function (data) {
            	$("#add-image-btn").button('reset');
	            //成功
	            if (data.success){
	            	$("#add-image-dailog").modal('close');
	            	$(".error-msg").text('');
	            	var template = Handlebars.compile($("#add-image-item").html());
	            	$('#banners').prepend(template(data));
	            } else {
					$(".error-msg").text(data.error);
		        }
            }
    };
    $("#add-image-form").ajaxForm(options);
    

	$(document).on("click",".m-image-close",function(){
		$li = $(this).closest("li");
		$.post("{{URL::route('banner-del')}}",$li.data(),function(data){
			if (data.success){
				$li.remove();
			}
		});
	});

	$("#style").on("change",function(){
		$(this).closest("form").ajaxSubmit();
	});
	
});
</script>
@stop
